<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">饰品品质</span>
      <k-select
        v-model="listQuery.rarityId"
        class="filter-item babyquality"
        :select-params="dict.type.ORNAMENT_QUALITY"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品外观</span>
      <k-select
        v-model="listQuery.exteriorId"
        class="filter-item babylook"
        :select-params="dict.type.ORNAMENT_APPEARANCE"
        @handleSelectEvent="handleFilter"
      />
      <!-- 动态数据 需要获取 -->
      <span class="filter-title filter-item">饰品分类</span>
      <k-select
        v-model="listQuery.categoryId"
        class="filter-item babycategory"
        :custom-params="{opations:categoryList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品类别</span>
      <k-select
        v-model="listQuery.qualityId"
        class="filter-item openbox-name"
        :select-params="dict.type.ORNAMENT_CATEGORY"
        @handleSelectEvent="handleFilter"
      />

      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="饰品名称或关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <div class="top-right-btn-container">
      <k-button
        class="top-btn"
        value="添加饰品"
        @click.native="addBabyDialog"
      />
      <k-button
        class="top-btn"
        value="删除饰品"
        @click.native="deletebaby"
      />
      <div class="boxpricediv">
        <span style="white-space:nowrap;margin-right:10px">箱子价格：</span>
        <el-input v-model.trim="price" placeholder="请输入数值" onkeyup="value=value.replace(/[^0-9.]/g,'')" style="width:140px;" />
        <span style="white-space:nowrap;margin-right:10px;margin-left:30px">箱子折扣：</span>
        <el-input v-model.trim="rebate" placeholder="请输入数值" onkeyup="value=value.replace(/[^0-9.]/g,'')" style="width:140px;" />
        <span>%</span>
        <k-button class="top-right-btn" value="完成配置" @click.native="finishSetting" />
      </div>
    </div>
    <!--表格相关 -->
    <el-table
      :key="price + rebate + key"
      :data="tableData"
      style="width: 100%"
      fit
      highlight-current-row
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" min-width="30" align="center" />
      <el-table-column type="index" label="序号" fixed width="50" align="center" />
      <el-table-column label="图标" fixed min-width="110" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 110px; height: 80px"
            :src="scope.row.iconUrl"
            :preview-src-list="[scope.row.iconUrl]"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodsCnName" label="饰品名称" fixed min-width="100" show-overflow-tooltip align="center" />
      <el-table-column label="扎比特数据" align="center">
        <el-table-column prop="zbtMinPrice" label="最低价" sortable width="80" align="center" />
        <el-table-column prop="zbtSellNum" label="当前数量" sortable width="80" align="center" />
      </el-table-column>
      <el-table-column prop="zbtOfficialPrice" label="参考价" sortable width="80" align="center" />
      <el-table-column prop="customPrice" label="自定义价格" sortable min-width="100" align="center">
        <editable-cell v-model="row.customPrice" slot-scope="{row}" :show-input="row.editMode" @keyup.enter.native="upcustomPrice(row)">
          <span slot="content" :style="{'color':row.isUpdate === 2 ? '#3b425d':'#409EFF'}">{{ row.customPrice }}</span>
        </editable-cell>
      </el-table-column>
      <!-- 概率 -->
      <el-table-column label="概率" min-width="150" align="center">
        <template slot="header">
          <div class="headeradd">
            <label>概率</label>
            <i class="el-icon-circle-plus" @click="addCol(true)" />
          </div>
        </template>
        <!-- 概率添加 start -->
        <el-table-column label="前台概率" align="center">
          <el-table-column width="80" align="center">
            <template slot="header">
              <span>X </span>
              <el-tooltip placement="top" content="期望利润">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <el-table-column width="80" align="center">
              <!-- 期望利润 -->
              <template slot="header" slot-scope="scope">
                <div class="price-div" @click="ischangeNum(0)">
                  <el-input v-show="isCellable[0]" v-model="profitList[0]" @keyup.enter.native="isblurInput(0)" @blur="isblurInput(0)" />
                  <span v-show="!isCellable[0]">{{ profitList[0] }} </span>
                  <span>%</span>
                </div>
              </template>
              <!-- 饰品概率 -->
              <editable-cell v-model="row.probabilityList[0]" slot-scope="{row}" :show-input="row.editMode" @inputChange="inputChange($event,0)" @keyup.enter.native="upExpectLiyi()">
                <span slot="content">{{ row.probabilityList[0] }}</span>
              </editable-cell>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Y </span>
              <el-tooltip placement="top" content="理论期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 理论期望价格 -->
            <el-table-column width="80" align="center">
              <template slot="header">
                <span>{{ getExpectedPrice(0) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Z </span>
              <el-tooltip placement="top" content="期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 期望价格 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ expectedPriceCal(0) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" align="center">
            <template slot="header">
              <span>∑ </span>
              <el-tooltip placement="top" content="概率和">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 概率和 -->
            <el-table-column width="80" align="center">
              <!-- <template slot="header"> -->
              <template #header>
                <span>{{ probilitySumCal(0) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="概率A" align="center">
          <el-table-column width="80" align="center">
            <template slot="header">
              <span>X </span>
              <el-tooltip placement="top" content="期望利润">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <el-table-column width="80" align="center">
              <!-- 期望利润 -->
              <template slot="header" slot-scope="scope">
                <div class="price-div" @click="ischangeNum(1)">
                  <el-input v-if="isCellable[1]" v-model="profitList[1]" @keyup.enter.native="isblurInput(1)" @blur="isblurInput(1)" />
                  <span v-else>{{ profitList[1] }} </span>
                  <span>%</span>
                </div>
              </template>
              <!-- 饰品概率 -->
              <editable-cell v-model="row.probabilityList[1]" slot-scope="{row}" :show-input="row.editMode" @keyup.enter.native="upExpectLiyi()" @inputChange="inputChange($event,1)">
                <span slot="content">{{ row.probabilityList[1] }}</span>
              </editable-cell>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Y </span>
              <el-tooltip placement="top" content="理论期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 理论期望价格 -->
            <el-table-column width="80" align="center">
              <template slot="header">
                <span>{{ getExpectedPrice(1) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Z </span>
              <el-tooltip placement="top" content="期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 期望价格 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ expectedPriceCal(1) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" align="center">
            <template #header>
              <span>∑ </span>
              <el-tooltip placement="top" content="概率和">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 概率和 -->
            <el-table-column width="80" align="center">
              <template slot="header">
                <span>{{ probilitySumCal(1) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="概率B" align="center">
          <el-table-column width="80" align="center">
            <template slot="header">
              <span>X </span>
              <el-tooltip placement="top" content="期望利润">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <el-table-column width="80" align="center">
              <!-- 期望利润 -->
              <template slot="header" slot-scope="scope">
                <div class="price-div" @click="ischangeNum(2)">
                  <el-input v-if="isCellable[2]" v-model="profitList[2]" @keyup.enter.native="isblurInput(2)" @blur="isblurInput(2)" />
                  <span v-else>{{ profitList[2] }} </span>
                  <span>%</span>
                </div>
              </template>
              <!-- 饰品概率 -->
              <editable-cell v-model="row.probabilityList[2]" slot-scope="{row}" :show-input="row.editMode" @keyup.enter.native="upExpectLiyi()" @inputChange="inputChange($event,2)">
                <span slot="content">{{ row.probabilityList[2] }}</span>
              </editable-cell>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Y </span>
              <el-tooltip placement="top" content="理论期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 理论期望价格 -->
            <el-table-column width="80" align="center">
              <template slot="header">
                <span>{{ getExpectedPrice(2) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Z </span>
              <el-tooltip placement="top" content="期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 期望价格 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ expectedPriceCal(2) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" align="center">
            <template slot="header">
              <span>∑ </span>
              <el-tooltip placement="top" content="概率和">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 概率和 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ probilitySumCal(2) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!-- 灵活表格概率 -->
        <el-table-column
          v-for="(col, index) in newProbabilityList"
          :key="col.index"
          align="center"
        >
          <template slot="header">
            <div>
              <label>概率{{ letterRelative[index] }}</label>
              <i class="el-icon-remove" @click="removeCol(index)" />
            </div>
          </template>
          <el-table-column width="80" align="center">
            <template slot="header">
              <span>X </span>
              <el-tooltip placement="top" content="期望利润">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <el-table-column width="80" align="center">
              <!-- 期望利润 -->
              <template slot="header" slot-scope="scope">
                <div class="price-div" @click="ischangeNum(index + 3)">
                  <el-input v-if="isCellable[index + 3]" v-model="profitList[index+3]" @keyup.enter.native="isblurInput(index + 3)" @blur="isblurInput(index + 3)" />
                  <span v-else>{{ profitList[index + 3] }} </span>
                  <span>%</span>
                </div>
              </template>
              <!-- 饰品概率 -->
              <editable-cell v-model="row.probabilityList[index + 3]" slot-scope="{row}" :show-input="row.editMode" @keyup.enter.native="upExpectLiyi()" @inputChange="inputChange($event,index + 3)">
                <span slot="content">{{ row.probabilityList[index + 3] || 0 }}</span>
              </editable-cell>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Y </span>
              <el-tooltip placement="top" content="理论期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 理论期望价格 -->
            <el-table-column width="80" align="center">
              <template slot="header">
                <span>{{ getExpectedPrice(index + 3) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <span>Z </span>
              <el-tooltip placement="top" content="期望价格">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 期望价格 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ expectedPriceCal(index + 3) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" align="center">
            <template slot="header">
              <span>∑ </span>
              <el-tooltip placement="top" content="概率和">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <!-- 概率和 -->
            <el-table-column width="80" align="center">
              <template #header>
                <span>{{ probilitySumCal(index + 3) }} </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <!-- end 概率 -->
      <el-table-column label="饰品属性" align="center">
        <el-table-column prop="rarityName" label="品质" min-width="50" show-overflow-tooltip align="center" />
        <el-table-column prop="exteriorName" label="外观" min-width="50" show-overflow-tooltip align="center" />
        <el-table-column prop="categoryName" label="分类" min-width="50" show-overflow-tooltip align="center" />
        <el-table-column prop="qualityName" label="类别" min-width="50" show-overflow-tooltip align="center" />
      </el-table-column>
      <el-table-column prop="containName" label="所在箱子" min-width="80" align="center">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.boxList" :key="index" @click="refreshPage(item.id, item.boxStatus)">
            <span v-if="item.boxStatus === 2" class="router-link">{{ item.boxName }}</span>
            <span v-else class="router-link-no">{{ item.boxName }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加饰品 弹窗 -->
    <k-dialog
      :show-hide.sync="addBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加饰品"
      class="addBaby-dialog"
      :two-btn="false"
      :close-fun="handleCloseDialog"
    >
      <searchadd
        ref="ksearchadd"
        class="search-add"
        :result-list="resultList"
        @requestReslutList="requestReslutList"
        @clearReslutList="clearReslutList"
        @handleCloseDialog="handleCloseDialog"
        @saveBabyData="saveBabyData"
      />
    </k-dialog>
  </div>
</template>

<script>
import { getGoodsPlatformList, getProbabilityConfig, saveProbabilityConfig, getGoodsPlatformListDetail } from '@/api/rules/listdata'
import { getCategoryList, updateGoodsPrice } from '@/api/babylib/platformlib/listdata'
import EditableCell from '@/components/EditableCell'

import Searchadd from '@/components/KSearchAdd' // secondary package based on el-pagination
export default {
  components: { Searchadd, EditableCell },
  dicts: ['ORNAMENT_QUALITY', 'ORNAMENT_APPEARANCE', 'ORNAMENT_CATEGORY'],
  data() {
    return {
      letterRelative: ['C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
      isCellable: [],
      categoryList: [],
      profitList: [], // 期望利润
      rowNewDataList: [], // 拼凑的列概率数据
      rebate: 100, // 箱子折扣 保存箱子配置时必传',
      price: 0, // 箱子价格 保存箱子配置时必传',
      // 概率列组
      groupListItem: {
        probabilitySort: '', // 概率组排序
        expectProfit: '', // 期望利润
        theoryExpectPrice: '', // 理论期望价格
        expectPrice: ''// 期望价格
      },
      tableData: [], // 表格数据
      newProbabilityList: [], // 有几列概率
      listQuery: {
        id: undefined,
        categoryId: undefined, // 饰品分类,
        exteriorId: undefined, // 饰品外观',
        qualityId: undefined, // 饰品类别',
        rarityId: undefined, // 饰品品质',
        key: '' // 饰品名称'
      },
      // 全部数据
      resultList: [{
        lineId: -1,
        lineName: ' ',
        lineCheck: false
      }],
      multipleSelection: [],
      addBaby: {
        showHide: false
      },
      key: 1,
      // 添加动态列
      startIndex: 8, // 固定列起始index
      colNums: 3, // 固定概率列个数
      columnIndexArry: [],
      columnStartIndexArry: [],
      columnEndIndexArry: []
    }
  },
  created() {
    this.loadData()
    this.getCategory()
  },
  methods: {
    finishSetting() {
      if (this.tableData.length <= 0) {
        this.$message.warning('请添加饰品数据')
        return
      }
      const probilityNums = Number(this.newProbabilityList.length + 3)
      let sumPercent = 0
      for (let i = 0; i < probilityNums; i++) {
        sumPercent += Number(this.probilitySumCal(i))
      }
      if (sumPercent !== probilityNums * 100) {
        this.$message.warning('请确保概率和 ∑ 等于100')
        this.$log(sumPercent)
        return
      }
      this.$confirm('确定保存当前配置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const groupList = []
        for (let i = 0; i < probilityNums; i++) {
          this.getProbalityColumnData(i)
          groupList[i] = {
            probabilitySort: i, // 概率组排序
            expectProfit: this.profitList[i], // 期望利润
            theoryExpectPrice: this.getExpectedPrice(i), // 理论期望价格
            expectPrice: this.expectedPriceCal(i), // 期望价格
            itemList: this.rowNewDataList
          }
        }
        const goodsIdList = []
        this.tableData.map(item => {
          goodsIdList.push(item.id)
        })
        const settingData = {
          id: this.$route.query.id,
          goodsIdList: goodsIdList,
          groupList: groupList,
          rebate: this.rebate,
          price: this.price
        }
        this.$log(settingData)
        if (settingData.goodsIdList.length <= 0) return
        saveProbabilityConfig(settingData).then(res => {
          if (res.data.success) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 计算获取理论期望价格  Y
    getExpectedPrice(index) {
      const profitListItem = this.profitList[index]
      return (this.price * this.rebate / 100 / (1 + (profitListItem === undefined ? 0 : profitListItem) / 100)).toFixed(2)
    },
    getProbalityColumnData(index) {
      this.rowNewDataList = []
      for (let j = 0; j < this.tableData.length; j++) {
        const id = this.tableData[j].id
        const probabilityList = this.tableData[j].probabilityList
        const probabilityItem = probabilityList[index]
        this.rowNewDataList.push(
          { goodsId: id, probability: probabilityItem }
        )
      }
    },
    // 概率求和
    probilitySumCal(index) {
      let sum = 0
      this.tableData.map(item => {
        sum += Number(item.probabilityList[index])
      })
      return sum.toFixed(2)
    },
    // 期望价格
    expectedPriceCal(index) {
      let sum = 0
      this.tableData.map(item => {
        sum += item.customPrice * item.probabilityList[index] / 100
      })
      const expectedPrice = sum.toFixed(2)
      return expectedPrice
    },
    // 概率输入确认
    upExpectLiyi() {
    },
    inputChange(event, index) {
      this.probilitySumCal(index)
    },
    isblurInput(index) {
      this.isCellable[index] = false
      this.$set(this.isCellable, index, false)
    },
    ischangeNum(index) {
      this.isCellable[index] = true
      this.$set(this.isCellable, index, true)
    },
    // 初始化数据
    loadData() {
      const queryid = this.$route.query.id
      this.refreshPage(queryid, 2)
    },
    generateIndexArry() {
      for (let i = 0; i < this.colNums * 4; i++) {
        this.columnIndexArry.push(this.startIndex++)
      }
      this.startIndex = 8
      for (let i = 0; i < this.columnIndexArry.length; i++) {
        if (i % 4 === 0 && i !== this.columnIndexArry.length - 1) {
          this.columnStartIndexArry.push(this.columnIndexArry[i])
        } else {
          this.columnEndIndexArry.push(this.columnIndexArry[i])
        }
      }
      // this.$log('需要清零：' + this.columnEndIndexArry)
      // this.$log('需要合并：' + this.columnStartIndexArry)
    },
    addCol(flag) {
      this.columnIndexArry = []
      this.columnStartIndexArry = []
      this.columnEndIndexArry = []
      this.colNums++
      this.generateIndexArry()
      if (flag) {
        this.profitList.push(0)
        this.tableData.map(item => {
          item.probabilityList.push(0)
        })
      }
      this.newProbabilityList.push(0)
      // this.$log('添加----------------' + this.colNums)
      // this.$log(this.newProbabilityList)
      // this.$log(this.profitList)
      this.key = this.key + 1
    },
    removeCol(index) {
      this.$log(index)
      this.newProbabilityList.splice(index, 1)
      this.profitList.splice(index + 3, 1)
      this.tableData.map(item => {
        item.probabilityList.splice(index + 3, 1)
      })
      // this.$log('删除----------------')
      // this.$log(this.newProbabilityList)
      // this.$log(this.profitList)
      this.colNums--
      const length = this.columnStartIndexArry.length
      this.columnStartIndexArry.splice(length - 1, 1)
      this.key = this.key + 1
    },
    initColumn(newCloumn) {
      this.newProbabilityList = []
      this.colNums = 3
      this.columnIndexArry = []
      this.columnStartIndexArry = []
      this.columnEndIndexArry = []
      this.generateIndexArry()
      for (let i = 0; i < newCloumn; i++) {
        this.addCol(false)
      }
    },
    // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
    // 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
    // 也可以返回一个键名为rowspan和colspan的对象。
    // colspan属性规定单元格可横跨的列数
    // rowspan属性规定单元格可横跨的行数
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for (var item of this.columnStartIndexArry) {
        // this.$log(item)
        if (columnIndex === item) {
          return [1, 4]
        } else if (columnIndex === item + 1 || columnIndex === item + 2 || columnIndex === item + 3) {
          return [0, 0]
        }
      }
    },
    addBabyDialog() {
      this.addBaby.showHide = true
    },
    // 请求搜索添加饰品的返回列表
    requestReslutList(value) {
      const goodsIdList = []
      this.tableData.map(item => {
        goodsIdList.push(item.id)
      })
      getGoodsPlatformList({ key: value, alreadyIds: goodsIdList }).then(res => {
        this.resultList = []
        Object.assign(this.resultList, res.data)
        this.$log(res.data)
      })
    },
    // 请求搜索添加饰品的返回列表
    clearReslutList(value) {
      this.resultList = []
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取饰品分类
    getCategory() {
      getCategoryList().then(res => {
        const data = res.data
        this.categoryList = data
      })
    },
    // 删除饰品
    deletebaby() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行删除！')
        return
      }
      const selections = _vue.multipleSelection
      this.$confirm('确定删除选中的饰品么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        for (var i = 0; i < selections.length; i++) {
          ids.push(selections[i].id)
        }
        this.tableData = this.tableData.filter(item => !ids.includes(item.id))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.loadData()
    },
    upcustomPrice(row) {
      const price = row.customPrice
      const id = row.id
      updateGoodsPrice({ id: id, customPrice: price }).then(res => {
        row.isUpdate = 2
      })
    },
    // 保存 数据
    saveBabyData(value) {
      if (value.length < 1) {
        this.$message.error('请选择饰品添加！')
        return
      }
      getGoodsPlatformListDetail({ ids: value.map(item => item.lineId), size: Number(this.newProbabilityList.length + 3) }).then(res => {
        this.$message.success(res.message)
        let isInitData = false
        // 是否是初始化数据
        if (this.tableData.length < 1) {
          isInitData = true
        }
        this.tableData.push(...res.data)
        if (this.tableData.length <= 1 || isInitData) {
          this.initColumn(0)
        }
        this.key = this.key + 1
      })

      this.resetBabyDialogData()
      this.addBaby.showHide = false
    },
    // 重置添加饰品数据
    resetBabyDialogData() {
      this.$refs.ksearchadd.checkedList = []
      this.$refs.ksearchadd.keyword = ''
    },
    handleCloseDialog() {
      this.addBaby.showHide = false
      this.resetBabyDialogData()
    },

    // 获取箱子的饰品概率
    refreshPage(id, boxStatus) {
      if (boxStatus === 1) return
      this.listQuery.id = id
      getProbabilityConfig(this.listQuery).then(res => {
        this.$log(res)
        const data = res.data
        const originList = data.goodsList
        if (originList.length <= 0) {
          this.tableData = []
          return
        }
        this.tableData = []
        this.tableData = originList.map(row => {
          return {
            ...row,
            editMode: false
          }
        })
        this.price = data.price
        this.rebate = data.rebate
        this.profitList = data.profitList
        const newCloumn = originList[0].probabilityList.length - 3
        // this.$log('newCloumn:' + newCloumn)
        // this.$log('colNums:' + this.colNums)
        this.initColumn(newCloumn)
      })
    }
  }

}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.app-container{
  padding: 30px;
  height:100%;
}
.filter-container {
  margin-bottom: 0px;
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput{
    position:absolute;
    right: 20px;
  }
  .filter-title{
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }
  .babyquality {
    margin-right: 20px;
  }
  .babylook,.babycategory{
    margin-right: 20px;
  }
}
.top-btn{
  margin: 30px 0px 30px 0px;
  &:nth-of-type(2){
    margin-left: 20px;
  }
}
.kSelect .el-select .el-input .el-input__inner{
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}

.top-right-btn-container{
  position: relative;
  .boxpricediv{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 30px;
  }
  .top-right-btn{
    margin-left: 80px;
  }
}
.addBaby-dialog{
  ::v-deep .el-dialog__body{
    width: 678px;
    text-align: center;
  }
  .search-add{
    margin: 0 auto;
    padding: 50px 0px;
    height: 400px;
  }
}
::v-deep .el-icon{
    &-circle-plus, &-remove{
      font-size: 15px;
      color:$mainColor;
      margin-left: 10px;

   }
}
.headeradd{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.price-div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  ::v-deep .el-input__inner{
    padding: 0 5px
  }
}
.router-link{
  color: #409eff;
  &:hover{
    color:$mainColor;
  }
  &-no{
  }
}
</style>

